<template>
  <div>
    <bread class="filter">
      <h1 style="padding-right: 0px;">成果管理<i class="iconfont el-icon-arrow-right"></i></h1>
      <college-select
        label=""
        @change="handleLanguage"
        :options="filters.dataset"
        class="filter-block left-border-none">
      </college-select>
      <i class="iconfont el-icon-arrow-right"></i>
      <college-select
        label=""
        @change="handleLanguage"
        :options="filters.dataset"
        class="filter-block left-border-none">
      </college-select>
      <div class="filter-block">
        <search-box
          ref="searchBox"
          class="search-box"
          placeholder="搜索成果"
          :keyword="keyword"
          @search="getSearchWords"
          @clear="clearSearch"
          @active="hideFilter = true"
          @deactive="hideFilter = false">
        </search-box>
      </div>
      <template v-if="!hideFilter">
        <div class="filter-block">
          <normal-filter
            :label="filters.text"
            @change="handleLanguage"
            :options="filters.dataset">
          </normal-filter>
        </div>
        <div class="filter-block">
          <normal-filter
            :label="filters.text"
            @change="handleLanguage"
            :options="filters.dataset">
          </normal-filter>
        </div>
         <div class="filter-block">
          <normal-filter
            :label="'高级筛选'"
            @change="handleLanguage"
            :options="filters.dataset">
          </normal-filter>
        </div>
      </template>
        <div class="pull-right">
          <el-button
            size="small"
            @click=""
            plain>
            自定义表头
          </el-button>
          <el-button
            size="small"
            @click=""
            plain>
            手动选择
          </el-button>
          <el-button size="small" type="success" @click="dialog_college = true">导出Excel</el-button>
        </div>
    </bread>
    <pageContent hasPagination>
      <el-table
        stripe
        border
        :data="tableData3"
        style="width: 100%"
        >
        <el-table-column
          fixed
          prop="date"
          label="上传者"
          width="150">
        </el-table-column>
        <el-table-column
          prop="province"
          label="论文名"
          width="400">
        </el-table-column>
        <el-table-column
          sortable
          v-for="(item, i) in tab_header"
          :key="i"
          :label="item.label"
          :width="item.width">
         <template slot-scope="scope"><a href="javascript: void(0);">{{scope.row[item.prop]}}</a></template>
        </el-table-column>

      </el-table>
    </pageContent>
    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>
  </div>
</template>

<script>
import NormalFilter from 'components/NormalFilter';
import CollegeSelect from 'components/CollegeSelect';
import pagination from 'components/pagination';
import SearchBox from 'components/SearchBox';

const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'hello',
  data () {
    return {
      activeName: 'second',
      form: {
        name: '',
        desc: '',
      },
      pageSize: 10,
      total: 20,
      tab_header: [
        {
          prop: 'province',
          label: '刊物名称',
          width: '120'
        },
        {
          prop: 'province',
          label: '重要程度',
          width: '120'
        },
        {
          prop: 'province',
          label: '收录检索',
          width: '120'
        },
        {
          prop: 'province',
          label: '发表时间',
          width: '120'
        },
        {
          prop: 'province',
          label: '卷(期、版次)',
          width: '140'
        },
        {
          prop: 'province',
          label: '起止码',
          width: '120'
        },
        {
          prop: 'province',
          label: '本人排名',
          width: '120'
        },
        {
          prop: 'province',
          label: '通讯作者',
          width: '120'
        },
        {
          prop: 'province',
          label: '影响因子',
          width: '120'
        },
        {
          prop: 'province',
          label: 'ISSN号',
          width: '120'
        },
        {
          prop: 'province',
          label: '国际JCR号',
          width: '120'
        }
      ],
      dialogVisible: true,
      dialog_college: false,
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      filters: {
        dataset: [{txt: '全部', val: '0'}, {txt: '中文成果', val: '1'}, {txt: '英文成果', val: '2'}],
        text: '时间'
      },
      tableData3: [{
        date: '数学统计学院',
        name: '全校总计',
        province: '545',
        city: '234',
        address: ' 1518',
        zip: '0909'
      }, {
        date: '2016-05-03',
        name: '全校总计',
        province: '545',
        city: '234',
        address: ' 1518',
        zip: '0909'
      }, {
        date: '2016-05-03',
        name: '全校总计',
        province: '545',
        city: '234',
        address: ' 1518',
        zip: '0909'
      }],
      keyword: '',
      hideFilter: false,
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose() {

    },
    fetchData() {

    },
    handleLanguage(){},
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    getSearchWords() {
    },
    clearSearch() {
    },
  },
  components: {
    NormalFilter,
    CollegeSelect,
    pagination,
    SearchBox,
  }
};
</script>
<style lang="scss" scoped>
  @import './index.scss';
  .filter-block /deep/ .search-box input{
    transition: 0s;
  }
</style>
